import {
  LoginForm,
  ProFormText,
  ProFormCaptcha,
  ProFormCheckbox,
} from '@ant-design/pro-form';
import {
  UserOutlined,
  FieldBinaryOutlined,
  LockOutlined,
} from '@ant-design/icons';
import { message, Tabs, Space } from 'antd';
import { useState } from 'react';
import { connect } from 'dva';
import {
  useIntl,
  Link,
  history,
  FormattedMessage,
  SelectLang,
  useModel,
} from 'umi';
import qs from 'qs';
import styles from './index.less';

const iconStyles = {
  marginLeft: '16px',
  color: 'rgba(0, 0, 0, 0.2)',
  fontSize: '24px',
  verticalAlign: 'middle',
  cursor: 'pointer',
};

const loginPage = (props) => {
  const [submitting, setSubmitting] = useState(false);
  const [loginType, setLoginType] = useState('account');
  const { initialState, setInitialState } = useModel('@@initialState');
  const intl = useIntl();

  const onFinish = (values) => {
    const { dispatch } = props;
    console.log(loginType);
    if (loginType === 'account') {
      dispatch({
        type: 'login/login',
        payload: values,
      });
    } else {
      dispatch({
        type: 'login/register',
        payload: values,
      });
    }
  };
  return (
    <div style={{ backgroundColor: 'white' }} className={styles.container}>
      <div className={styles.lang} data-lang>
        {SelectLang && <SelectLang />}
      </div>
      <div className={styles.content}>
        <div className={styles.top}>
          <div className={styles.header}>
            <Link to="/">
              {/* <img alt="logo" className={styles.logo} src="/logo.svg" /> */}
              <span className={styles.title}>智慧工地车联网系统</span>
            </Link>
          </div>
          <div className={styles.desc}>
            {/* {intl.formatMessage({
              id: 'pages.layouts.userLayout.title',
            })} */}
            基于用友物联网（AIoT）平台的智能车联系统解决方案
          </div>
        </div>
        <div className={styles.main}>
          <LoginForm
            submitter={{
              searchConfig: {
                submitText: loginType === 'account' ? '登录' : '注册',
              },
              render: (_, dom) => dom.pop(),
              submitButtonProps: {
                loading: submitting,
                size: 'large',
                style: {
                  width: '100%',
                },
              },
            }}
            // initialValues={{
            //   autoLogin: true,
            // }}
            onFinish={onFinish}
          >
            <Tabs
              activeKey={loginType}
              onChange={(activeKey) => setLoginType(activeKey)}
            >
              <Tabs.TabPane key={'account'} tab={'账号密码登录'} />
              <Tabs.TabPane key={'register'} tab={'快速注册'} />
            </Tabs>
            {loginType === 'account' && (
              <>
                <ProFormText
                  name="userName"
                  fieldProps={{
                    size: 'large',
                    prefix: <UserOutlined className={'prefixIcon'} />,
                  }}
                  placeholder={'用户名:'}
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名!',
                    },
                  ]}
                />
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={'prefixIcon'} />,
                  }}
                  placeholder={'密码:'}
                  rules={[
                    {
                      required: true,
                      message: '请输入密码！',
                    },
                  ]}
                />
                <div
                  style={{
                    marginBottom: 24,
                  }}
                >
                  <ProFormCheckbox noStyle name="autoLogin">
                    自动登录
                  </ProFormCheckbox>
                  <a
                    style={{
                      float: 'right',
                    }}
                  >
                    忘记密码
                  </a>
                </div>
              </>
            )}
            {loginType === 'register' && (
              <>
                <ProFormText
                  fieldProps={{
                    size: 'large',
                    prefix: <FieldBinaryOutlined className={'prefixIcon'} />,
                  }}
                  name="realName"
                  placeholder={'真实姓名'}
                  rules={[
                    {
                      required: true,
                      message: '请输入真实姓名！',
                    },
                  ]}
                />
                <ProFormText
                  name="userName"
                  fieldProps={{
                    size: 'large',
                    prefix: <UserOutlined className={'prefixIcon'} />,
                  }}
                  placeholder={'用户名:'}
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名!',
                    },
                  ]}
                />
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={'prefixIcon'} />,
                  }}
                  placeholder={'密码:'}
                  rules={[
                    {
                      required: true,
                      message: '请输入密码！',
                    },
                  ]}
                />
              </>
            )}
          </LoginForm>
        </div>
      </div>
    </div>
  );
};

export default connect(({ login: { loading } }) => ({ loading }))(loginPage);
